import * as React from 'react';
import {View, Text, Image} from 'react-native';
import BasePageV5 from 'react-native-cdy-baseui/components/BasePageV5';
import ImageConstants from '../resources/ImageConstants';
import AutoSizingImage from 'react-native-cdy-baseui/components/AutoSizingImage';
import HttpUtil from 'react-native-cdy-baseui/network/HttpUtil';
import WebView from 'react-native-webview';
class ZYPage extends BasePageV5 {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async loadData() {
    try {
      const {data} = await HttpUtil.get(
        'stadium/banPaiTDWYApi/api/getNoPluginParamInfoApi',
        {classroomId: HttpUtil.getItem('ROOM_INFO').laboratoryId},
      );
      this.hideLoading(false);
      this.setState({data});
    } catch (e) {
      this.hideLoading(true);
      requestAnimationFrame(() => {
        this.navigatePage('SettingPage');
      });
    }
  }

  renderContent() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'stretch',
          backgroundColor: 'white',
        }}>
        <Image
          source={ImageConstants.IMG_BCG}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        />
        <Image
          source={ImageConstants.IMG_SHADOW}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
          }}
        />
        <View
          style={{
            width: '90%',
            marginTop: '12%',
            marginHorizontal: '5%',
            flexDirection: 'row',
          }}>
          <View
            style={{
              width: '15%',
              alignItems: 'flex-end',
              justifyContent: 'center',
            }}>
            <AutoSizingImage
              source={ImageConstants.IMG_TAB_WHITE}
              resizeMode="stretch"
              width={'90%'}
              style={{
                marginRight: '-10%',
              }}
            />
            <AutoSizingImage
              source={ImageConstants.IMG_TAB_BLUE}
              resizeMode="contain"
              width={'90%'}
              style={{
                marginRight: '-10%',
              }}
            />
            <AutoSizingImage
              source={ImageConstants.IMG_TAB_PURPLE}
              resizeMode="contain"
              width={'90%'}
              style={{
                marginRight: '-10%',
              }}
            />
            <AutoSizingImage
              source={ImageConstants.IMG_TAB_GREEN}
              resizeMode="contain"
              width={'90%'}
              style={{
                marginRight: '-10%',
              }}
            />
            <AutoSizingImage
              source={ImageConstants.IMG_TAB_YELLOW}
              resizeMode="contain"
              width={'90%'}
              style={{
                marginRight: '-10%',
              }}
            />
          </View>
          <View style={{width: '85%'}}>
            <Image
              source={ImageConstants.IMG_SUPERVISION_BCG_SHADOW}
              resizeMode="contain"
              style={{
                position: 'absolute',
                top: '4%',
                left: '2%',
                width: '101%',
                height: '100%',
              }}
            />
            <AutoSizingImage
              source={ImageConstants.IMG_SUPERVISION_BCG}
              resizeMode="contain"
              style={{
                width: '100%',
                alignItems: 'stretch',
              }}>
              <WebView
                style={{width: '100%', height: '100%'}}
                originWhitelist={['*']}
                source={{
                  uri: 'file:///android_asset/web/index.html',
                  baseUrl: 'file:///android_asset/web/',
                }}
                injectedJavaScript={`window.tdPlayer.play(0, {
                  dev_id: "${this.state.data.sSupDeviceId}",
                  client_sup_id: "${this.state.data.sMsDeviceId}",
                  dev_sup_id: "${this.state.data.sMsDeviceId}",
                  client_sup_ip: "${this.state.data.sMsIp}",
                  client_sup_port: ${this.state.data.iMsWsPort},
                  info: {
                      ch: ${this.state.data.iCameraChannelNum},
                      data_type: 1
                  }
              });`}
              />
            </AutoSizingImage>
          </View>
        </View>
      </View>
    );
  }
}

export default ZYPage;
